.hr-line
  margin: 10px article-padding
  opacity: 0.5
  height: 3px
  background-image: linear-gradient(to left, var(--red-0) 50%, transparent 0%)
  background-size: 20px 3px
  background-repeat: repeat-x
  filter: drop-shadow(0px 0px 2px red)

.article-inner
  @extend $block
  overflow: hidden
  transition: all 0.3s ease

.article-meta
  clearfix()
  display: flex
  flex-direction: column
  padding: article-padding article-padding 0

$article-meta-tag
  text-decoration: none
  text-transform: uppercase
  font-size: 14px
  color: var(--red-1)
  background: var(--red-5)
  border-radius: 20px
  padding: 10px 18px
  margin: 0 12px 1em
  box-shadow: 0 0 5px 3px var(--color-meta-shadow)
  transition: all 0.3s ease

.article-date
  display: flex
  align-items: center

.article-date-link
  @extend $article-meta-tag

  &:before
    font-family: font-icon
    content: "\f017"
    margin-right: 10px

.article-category
  display: flex
  flex-wrap: wrap
  align-items: center

.article-category-link
  @extend $article-meta-tag

  &:before
    font-family: font-icon
    content: "\f02e"
    font-weight: 900
    margin-right: 10px

.article-title
  text-decoration: none
  font-size: 2em
  font-weight: bold
  color: var(--color-default)
  line-height: line-height-title
  transition: color 0.2s

  a&:hover
    color: var(--color-link)

.article-entry
  @extend $base-style
  clearfix()
  color: var(--color-default)
  padding: 0 article-padding + 15px

  @media mg-normal
    padding: 0 article-padding

  p, table
    line-height: line-height
    margin: line-height 0

  h1, h2, h3, h4, h5, h6
    font-weight: bold
    line-height: line-height-title
    margin: line-height-title 0

    &:before
      font-family: font-icon
      font-weight: normal

    a
      font-family: font-icon
      opacity: 0.5
      margin-right: 5px
      transition: all 0.3s ease

      &:hover
        opacity: 1
        text-decoration: none !important


  h2
    margin-bottom: 40px

  a
    color: var(--color-link)
    text-decoration: none

    &:hover
      text-decoration: underline

  ul, ol, dl
    margin-top: line-height
    margin-bottom: line-height

  li
    &:hover
      &::marker
        transition: color 0.2s ease
        color: var(--red-1)

  img, video
    max-width: 100%
    height: auto
    display: block
    margin: auto
    opacity: 0
    transition: all 0.3s ease

  img.lazyloaded
    opacity: 1
    animation: blur 0.8s ease-in-out forwards

  iframe
    border: none

  table
    width: 100%
    border-collapse: collapse
    border-spacing: 0

  th
    font-weight: bold
    border-bottom: 3px solid var(--color-border)
    padding-bottom: 0.5em

  td
    border-bottom: 1px solid var(--color-border)
    padding: 10px 0

  blockquote
    background: var(--red-5-5)
    border-left: 6px var(--red-4) solid
    margin: line-height 0
    border-radius: post-radius
    transition: all 0.3s ease
    padding: 1px 10px

    @media mg-normal
      margin: line-height 0

    footer
      font-size: font-size
      margin: line-height 0

      cite
        &:before
          content: "—"
          padding: 0 0.5em

  .pullquote
    text-align: left
    width: 45%
    margin: 0

    &.left
      margin-left: 0.5em
      margin-right: 1em

    &.right
      margin-right: 0.5em
      margin-left: 1em

  .caption
    color: var(--color-grey)
    display: block
    font-size: 0.9em
    margin-top: 0.5em
    position: relative
    text-align: center

  // http://webdesignerwall.com/tutorials/css-elastic-videos

  .video-container
    position: relative
    padding-top: (9 / 16 * 100) % // 16:9 ratio
    height: 0
    overflow: hidden

    iframe, object, embed
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      margin-top: 0

.article-more-link a
  display: inline-block
  line-height: 1em
  padding: 6px 15px
  border-radius: 15px
  background: var(--red-5)
  color: var(--red-1)
  text-decoration: none
  box-shadow: 0 0 5px 3px var(--red-6)

  &:hover
    background: var(--color-link)
    color: #fff
    text-decoration: none
    text-shadow: 0 1px var(--color-dark-link)

.article-footer
  clearfix()
  font-size: 14px
  border-top: 1px solid var(--color-border)
  margin: 0 article-padding article-padding

  a
    text-decoration: none

.article-tag-list-link,
.article-share-link,
.article-comment-link
.article-visitor-link
  color: var(--red-1)
  margin-top: article-padding

.article-tag-list-item
  float: left
  text-decoration: none
  text-transform: uppercase
  background: var(--red-5)
  border-radius: 20px
  padding: 10px 18px
  margin-top: article-padding
  margin-right: 10px

.article-tag-list-link
  &:before
    font-family: font-icon
    margin-right: 10px
    content: "\f02b"

.article-comment-link
  float: right
  background: var(--red-5)
  margin-left: 20px
  border-radius: 20px
  padding: 10px 18px

  &:before
    font-family: font-icon
    content: "\f075"
    margin-right: 10px

.article-share-link
  if reimu_cursor
    cursor: url(/images/cursor/reimu-cursor-pointer.cur), pointer
  else
    cursor: pointer
  float: right
  margin-left: 20px
  font-size: 14px
  background: var(--red-5)
  border-radius: 20px
  padding: 10px 18px

  &:before
    font-family: font-icon
    content: "\f064"
    margin-right: 10px

.article-visitor-link
  float: right
  font-size: 14px
  background: var(--red-5)
  border-radius: 20px
  padding: 10px 18px

#article-nav
  clearfix()
  margin-top: 10px
  display: flex
  flex-direction: column
  border-radius: post-radius
  overflow: hidden
  @media mq-normal
    flex-direction: row

.article-nav-link-wrap
  backgroud-color: var(--color-wrap)
  color: white
  position: relative
  flex: 1
  display: flex
  flex-direction: column
  justify-content: center
  padding-left: 20px
  opacity: 0.9
  transition: opacity 0.3s ease
  height: 150px
  min-height: 150px
  flex-shrink: 0

  a,
  img
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    filter: brightness(80%)

  img
    display: block
    opacity: 0
    position: absolute
    left: 0
    top: 0
    object-fit: cover
    width: 100%
    height: 100%
    z-index: -1


  img.lazyloaded
    opacity: 1
    animation: blur 0.8s ease-in-out forwards

  &:hover
    opacity: 1

.article-nav-link-right
  align-items: flex-end
  padding-right: 20px

.article-nav-caption
  text-transform: uppercase
  letter-spacing: 2px
  line-height: 0.85em
  font-weight: bold

.article-nav-title
  font-size: 1.2em
  line-height: line-height
  margin-top: 0.8em
  text-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);

.article-share-box
  position: absolute
  display: none
  background: #fff
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
  border-radius: 3px
  margin-left: -145px
  overflow: hidden
  z-index: 1

  &.on
    display: block

.article-share-input
  width: 100%
  background: none
  box-sizing: border-box
  font: 14px font-sans
  padding: 0 15px
  color: var(--color-default)
  outline: none
  border: 1px solid var(--color-border)
  border-radius: 3px 3px 0 0
  height: 36px
  line-height: 36px

.article-share-links
  clearfix()
  background: var(--color-background)

$article-share-link
  width: 50px
  height: 36px
  display: block
  float: left
  position: relative
  color: #999

  &:before
    font-size: 20px
    font-family: font-icon
    absolute-center(@font-size)
    text-align: center

  &:hover
    color: #fff

.article-share-twitter
  @extend $article-share-link
  &:before
    font-family: font-icon
    content: "\f099"

  &:hover
    background: var(--color-twitter)
    text-shadow: 0 1px var(--color-dark-twitter)

.article-share-facebook
  @extend $article-share-link
  &:before
    font-family: font-icon
    content: "\f09a"

  &:hover
    background: var(--color-facebook)
    text-shadow: 0 1px var(--color-dark-facebook)

.article-share-pinterest
  @extend $article-share-link
  &:before
    font-family: font-icon
    content: "\f0d2"

  &:hover
    background: var(--color-pinterest)
    text-shadow: 0 1px var(--color-dark-pinterest)

.article-share-linkedin
  @extend $article-share-link
  &:before
    font-family: font-icon
    content: "\f0e1"

  &:hover
    background: var(--color-linkedin)
    text-shadow: 0 1px var(--color-dark-linkedin)

.article-gallery
  background: #000
  position: relative

.article-gallery-photos
  position: relative
  overflow: hidden

.article-gallery-img
  display: none
  max-width: 100%

  &:first-child
    display: block

  &.loaded
    position: absolute
    display: block

  img
    display: block
    max-width: 100%
    margin: 0 auto

.katex-display
  overflow-x: auto
  overflow-y: hidden

